<template>
  <div class="vi-page">
    <el-scrollbar class="menu">
      <Menu :index="1" />
    </el-scrollbar>
    <el-scrollbar class="colL">
      <!-- 创意灵感 -->
      <div class="section">
        <div class="title-bar">
          <div class="title">创意灵感</div>
          <el-button
            type="primary"
            size="small"
            icon="Refresh"
            :style="{ marginLeft: 'auto' }"
            @click="handleTry"
            >试一试</el-button
          >
        </div>
        <el-input
          type="textarea"
          :rows="4"
          v-model="form.c1"
          :style="{ width: '100%' }"
        ></el-input>
      </div>

      <!-- 尺寸 -->
      <div class="section">
        <div class="title-bar">
          <div class="title">尺寸</div>
        </div>
        <div class="size-list">
          <div
            class="item-box"
            :class="{ active: size === 0 }"
            @click="size = 0"
          ></div>
          <div
            class="item-box"
            :class="{ active: size === 1 }"
            @click="size = 1"
          ></div>
          <div
            class="item-box"
            :class="{ active: size === 2 }"
            @click="size = 2"
          ></div>
          <div
            class="item-box"
            :class="{ active: size === 3 }"
            @click="size = 3"
          ></div>
          <div
            class="item-box"
            :class="{ active: size === 4 }"
            @click="size = 4"
          ></div>
          <div
            class="item-box"
            :class="{ active: size === 5 }"
            @click="size = 5"
          ></div>
        </div>
      </div>

      <!-- 模型选择 -->
      <div class="section">
        <div class="title-bar">
          <div class="title">模型选择</div>
        </div>
        <div class="model">
          <div class="item" :class="{ active: model === 0 }" @click="model = 0">
            MJ
          </div>
          <div class="item" :class="{ active: model === 1 }" @click="model = 1">
            NIJI
          </div>
        </div>
      </div>

      <!-- 忽略元素（可选） -->
      <div class="section">
        <div class="title-bar">
          <div class="title">忽略元素（可选）</div>
        </div>
        <el-input
          v-model="form.c2"
          placeholder="例如：生成一幅街景，但不要有汽车，你可以填写car"
        />
      </div>

      <!-- 画面质感 -->
      <div class="section">
        <div class="title-bar">
          <div class="title">画面质感</div>
        </div>
        <el-tabs v-model="activeName" :style="{ marginTop: '-5px' }">
          <el-tab-pane label="通用" name="first" class="frame">
            <div
              class="frameItem"
              :class="{ active: tab1 === item }"
              v-for="item in [
                '柔光',
                '木板线条',
                '霓虹灯光',
                '大师之作',
                '蒸汽朋克',
                '卡通',
                '国风',
              ]"
              :key="item"
              @click="tab1 = item"
            >
              {{ item }}
            </div>
          </el-tab-pane>
          <el-tab-pane label="镜头视角" name="second" class="frame">
            <div
              class="frameItem"
              :class="{ active: tab2 === item }"
              v-for="item in ['超广角', '中景', '远景', '长焦镜头', '暖色']"
              :key="item"
              @click="tab2 = item"
            >
              {{ item }}
            </div>
          </el-tab-pane>
          <el-tab-pane label="画面类型" name="third" class="frame">
            <div
              class="frameItem"
              :class="{ active: tab3 === item }"
              v-for="item in [
                '科幻',
                '抽象',
                '复古',
                '洛可可',
                '现实',
                '立绘',
                '拼贴',
              ]"
              :key="item"
              @click="tab3 = item"
            >
              {{ item }}
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>

      <!-- 上传参考图 -->
      <div class="section" :style="{ marginTop: '6px' }">
        <div class="title-bar">
          <div class="title">上传参考图</div>
        </div>
        <div class="upload">
          <el-upload drag action="" multiple>
            <el-icon class="el-icon--upload"><upload-filled /></el-icon>
            <div class="el-upload__text">
              点击或拖拽图片上传，支持PNG、JPG，20M以内<br />或从 我的作品 或
              模板库 中选择
            </div>
          </el-upload>
        </div>
      </div>

      <!-- 高级选项 -->
      <div class="section">
        <div class="title-bar">
          <div class="title">高级选项</div>
          <el-switch
            v-model="form.gjys"
            :style="{ '--el-switch-on-color': '#13ce66', marginLeft: '28px' }"
          />
        </div>
        <template v-if="form.gjys">
          <el-row align="middle">
            <el-col :span="6">RAW</el-col>
            <el-col :span="14">
              <el-switch v-model="form.raw" />
            </el-col>
            <el-button
              type="text"
              :icon="Warning"
              :style="{ marginLeft: 'auto' }"
            ></el-button>
          </el-row>
          <el-row align="middle">
            <el-col :span="6">重复</el-col>
            <el-col :span="14">
              <el-switch v-model="form.cf" />
            </el-col>
            <el-button
              type="text"
              :icon="Warning"
              :style="{ marginLeft: 'auto' }"
            ></el-button>
          </el-row>
        </template>
      </div>

      <template v-if="form.gjys">
        <!-- 参数 -->
        <div class="section">
          <div class="title-bar">
            <div class="title">参数</div>
          </div>
          <el-row align="middle" :style="{ marginBottom: '12px' }">
            <el-col :span="6">画质</el-col>
            <el-col :span="14">
              <el-select placeholder="高清"></el-select>
            </el-col>
            <el-button
              type="text"
              :icon="Warning"
              :style="{ marginLeft: 'auto' }"
            ></el-button>
          </el-row>
          <el-row align="middle">
            <el-col :span="6">混乱</el-col>
            <el-col :span="14">
              <el-input-number
                v-model="form.hl"
                :min="1"
                :max="100"
                :style="{ width: '100%' }"
                controls-position="right"
              />
            </el-col>
            <el-button
              type="text"
              :icon="Warning"
              :style="{ marginLeft: 'auto' }"
            ></el-button>
          </el-row>
        </div>

        <!-- 风格化 -->
        <div class="section">
          <div class="title-bar">
            <div class="title">风格化</div>
          </div>
          <el-radio-group v-model="tabPosition">
            <el-radio-button label="低"></el-radio-button>
            <el-radio-button label="中"></el-radio-button>
            <el-radio-button label="高"></el-radio-button>
            <el-radio-button label="强烈"></el-radio-button>
          </el-radio-group>
          <el-input-number
            v-model="form.fgh"
            :min="1"
            :max="100"
            :style="{ width: '100%', marginTop: '14px' }"
            controls-position="right"
          />
        </div>

        <!-- 设定 -->
        <div class="section">
          <div class="title-bar">
            <div class="title">设定</div>
          </div>
          <el-row align="middle">
            <el-col :span="6">携带参数</el-col>
            <el-col :span="14">
              <el-switch v-model="form.xdcs" />
            </el-col>
            <el-button
              type="text"
              :icon="Warning"
              :style="{ marginLeft: 'auto' }"
            ></el-button>
          </el-row>
          <el-row align="middle">
            <el-col :span="6">默认参数</el-col>
            <el-col :span="14">
              <el-button type="text">重置</el-button>
            </el-col>
          </el-row>
        </div>
      </template>

      <div class="btn-panel">
        <el-button type="primary" :loading="loading" @click="handleCreate"
          >生成</el-button
        >
      </div>
    </el-scrollbar>
    <div class="colR">
      <template v-if="isPreview">
        <div class="preview" v-if="loading">
          <el-skeleton animated />
        </div>
        <div class="preview" v-else>
          <div
            class="imageItem"
            v-for="(item, index) in imgList"
            :key="item"
            @mouseover="mouseOver(item)"
            @mouseleave="mouseLeave"
          >
            <img
              v-if="currentPic == item"
              class="save"
              src="../../assets/img/29.2.png"
              alt=""
            />
            <img :src="item" alt="" class="image" />
            <img
              v-if="currentPic == item"
              class="download"
              src="../../assets/img/30.1.png"
              alt=""
            />
          </div>
        </div>
      </template>
    </div>
    <div class="bookmark">
      <div class="title">收藏夹</div>
      <el-scrollbar class="scrollbar">
        <div class="rows">
          <img
            src="../../assets/img/sowing/2.png"
            class="image"
            :class="{ active: activeIndex === 0 }"
            alt=""
            @click="activeIndex = 0"
          />
          <img
            src="../../assets/img/sowing/3.png"
            class="image"
            :class="{ active: activeIndex === 1 }"
            alt=""
            @click="activeIndex = 1"
          />
          <img
            src="../../assets/img/sowing/4.png"
            class="image"
            :class="{ active: activeIndex === 2 }"
            alt=""
            @click="activeIndex = 2"
          />
          <img
            src="../../assets/img/sowing/5.jpg"
            class="image"
            :class="{ active: activeIndex === 3 }"
            alt=""
            @click="activeIndex = 3"
          />
          <img
            src="../../assets/img/sowing/1.png"
            class="image"
            :class="{ active: activeIndex === 4 }"
            alt=""
            @click="activeIndex = 4"
          />
          <img
            src="../../assets/img/sowing/6.png"
            class="image"
            :class="{ active: activeIndex === 5 }"
            alt=""
            @click="activeIndex = 5"
          />

          <img
            src="../../assets/vi/1.png"
            class="image"
            :class="{ active: activeIndex === 6 }"
            alt=""
            @click="activeIndex = 6"
          />
          <img
            src="../../assets/vi/2.png"
            class="image"
            :class="{ active: activeIndex === 7 }"
            alt=""
            @click="activeIndex = 7"
          />
          <img
            src="../../assets/vi/3.png"
            class="image"
            :class="{ active: activeIndex === 8 }"
            alt=""
            @click="activeIndex = 8"
          />
          <img
            src="../../assets/vi/4.png"
            class="image"
            :class="{ active: activeIndex === 9 }"
            alt=""
            @click="activeIndex = 9"
          />
          <img
            src="../../assets/vi/5.png"
            class="image"
            :class="{ active: activeIndex === 10 }"
            alt=""
            @click="activeIndex = 10"
          />
          <img
            src="../../assets/vi/6.png"
            class="image"
            :class="{ active: activeIndex === 11 }"
            alt=""
            @click="activeIndex = 11"
          />
          <img
            src="../../assets/vi/7.png"
            class="image"
            :class="{ active: activeIndex === 12 }"
            alt=""
            @click="activeIndex = 12"
          />
        </div>
      </el-scrollbar>
    </div>
  </div>
</template>
<script setup>
import { ref, reactive } from "vue";
import { Refresh, Warning } from "@element-plus/icons-vue";
import Menu from "./menu.vue";
import img1 from "../../assets/vi/c1.png";
import img2 from "../../assets/vi/c2.png";
import img3 from "../../assets/vi/c3.png";
import img4 from "../../assets/vi/c4.png";
import img5 from "../../assets/img/sowing/5.jpg";
import img6 from "../../assets/img/sowing/6.png";
import niupi from "../../assets/img/material-niupi.png";
import boli from "../../assets/img/material-boli.png";
import suliao from "../../assets/img/material-suliao.png";
import muban from "../../assets/img/material-muban.png";
import tongban from "../../assets/img/material-tongban.png";
const form = reactive({
  cplx: "",
  cylg: "",
  hmzg: "",
  sjfg: 1,
  hl: 0,
  fgh: 100,
});

const boxShapeNames = ref([
  { 0: ["双插盒", "包装箱"] },
  { 1: ["自立袋", "八边封袋", "手提纸袋", "帆布袋"] },
  { 2: ["金属罐", "塑料罐", "纸罐", "玻璃罐"] },
  { 3: ["纸杯", "桶"] },
]);

const firstTab = ref([
  "柔光",
  "木板线条",
  "霓虹灯光",
  "大师之作",
  "蒸汽朋克",
  "卡通",
  "国风",
]);
const secondTab = ref(["超广角", "中景", "远景", "长焦镜头", "暖色"]);
const thirdTab = ref([
  "科幻",
  "抽象",
  "复古",
  "洛可可",
  "现实",
  "立绘",
  "拼贴",
]);

const caiZhi = ref([
  { label: "牛皮纸", url: niupi },
  { label: "玻璃", url: boli },
  { label: "塑料", url: suliao },
  { label: "木板", url: muban },
  { label: "铜版纸", url: tongban },
]);

const currentCZ = ref("");
const tabPosition = ref("中");
const imgList = ref([img1, img2, img3, img4]);
const imgList2 = ref([img2, img3, img4, img5, img1, img6]);

const model = ref(0);
const size = ref(0);
const activeIndex = ref(0);
const activeBookType = ref("");
const tab1 = ref("");
const tab2 = ref("");
const tab3 = ref("");
const caizhi = ref("");
const loading = ref(false);
const isPreview = ref(false);

const hx1 = ref("");
const hx2 = ref("");
const hx3 = ref("");
const hx4 = ref("");
const hx5 = ref("");

const currentPic = ref("");
const activeName = ref("first");

function handleTabClick() {
  console.log("activBookType", activeBookType);
  activeBookType.value = "";
}

function mouseOver(url) {
  currentPic.value = url;
}
function mouseLeave() {
  currentPic.value = "";
}

function handleTry() {
  form.c1 =
    "创作一幅抽象主义作品，展示一位唐朝伟大的诗人，穿着华丽的唐装，手持羽毛，眼神深邃迷人。需要在图像中添加河流和山脉背景元素，以反映他的伟大性格。";
}

function handleCreate() {
  loading.value = true;
  isPreview.value = true;
  setTimeout(() => {
    loading.value = false;
  }, 3000);
}
</script>
<style lang="scss" scoped>
.vi-page {
  clear: both;
  overflow: hidden;
  height: 100%;
  line-height: 1;
  display: flex;
  font-size: 14px;

  .menu {
    margin-right: 20px;
    background-color: #fff;
  }

  .colL {
    width: 440px;
    height: calc(100vh - 100px);
    background-color: #fff;
    border-radius: 12px;
    overflow: hidden;
    margin: 20px 0;

    .section {
      clear: both;
      overflow: hidden;
      padding: 0 20px 10px;

      .title-bar {
        height: 44px;
        display: flex;
        align-items: center;

        .title {
          font-weight: bold;
        }

        .btn {
          margin-left: auto;
          cursor: pointer;
        }
      }

      .radio-group {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;

        .item-box {
          width: calc(50% - 10px);
        }
      }

      .upload {
        .el-upload__text {
          font-size: 12px;
          line-height: 1.6;
          color: #999;
        }
      }

      .cai-zhi {
        display: flex;
        flex-wrap: wrap;
        padding: 2px 0 10px;

        .activeCZ {
          border: 1px solid #48a0ff;
        }

        .item-box {
          width: calc(100% / 5);
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          cursor: pointer;

          .image {
            width: 50px;
            height: 50px;
            border: solid 2px transparent;
            border-radius: 50%;
          }

          .text {
            line-height: 24px;
            margin-top: 2px;
          }

          &.active {
            .image {
              border-color: #2171fe;
              background-color: #2171fe;
            }

            .text {
              color: #2171fe;
            }
          }
        }
      }

      .shapeList {
        display: grid;
        justify-content: center;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 10px;

        .shapeItem {
          display: flex;
          flex-direction: column;
          align-items: center;
          cursor: pointer;

          .img {
            height: 48px;
          }

          .name {
            text-align: center;
            color: #999;
            margin-top: 8px;
          }

          &.active {
            .name {
              color: #48a0ff;
            }
          }
        }
      }

      .frame {
        display: grid;
        justify-content: center;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 10px;

        .frameItem {
          border-radius: 30px;
          background: #eee;
          text-align: center;
          padding: 10px 5px;
          cursor: pointer;

          &.active {
            background-color: #2171fe;
            color: #fff;
          }
        }

        .activeTabItem {
          border: 1px solid #48a0ff;
        }
      }

      .selectContent {
        display: flex;
        align-items: center;
        margin: 10px 0px;
      }

      .selectList {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;

        .selectItem {
          border-radius: 10px;
          color: #fff;
          background: #48a0ff;
          padding: 5px;
        }
      }
      .size-list {
        display: flex;
        justify-content: space-between;
        .item-box {
          width: calc(100% / 6 - 10px);
          height: 68px;
          background-repeat: no-repeat;
          background-position: center;
          background-size: 100% auto;
          border: solid 2px #ddd;
          border-radius: 5px;
          cursor: pointer;
          &:nth-child(1) {
            background-image: url("../../assets/vi/c-1.png");
          }
          &:nth-child(2) {
            background-image: url("../../assets/vi/c-2.png");
          }
          &:nth-child(3) {
            background-image: url("../../assets/vi/c-3.png");
          }
          &:nth-child(4) {
            background-image: url("../../assets/vi/c-4.png");
          }
          &:nth-child(5) {
            background-image: url("../../assets/vi/c-5.png");
          }
          &:nth-child(6) {
            background-image: url("../../assets/vi/c-6.png");
          }
          &.active {
            border-color: #2171fe;
          }
        }
      }
      .model {
        display: flex;
        justify-content: space-between;
        .item {
          width: calc(50% - 5px);
          height: 102px;
          background-repeat: no-repeat;
          background-position: top;
          background-size: 100% auto;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 36px;
          color: #fff;
          font-weight: bold;
          &:nth-child(1) {
            background-image: url("../../assets/vi/m1.png");
          }
          &:nth-child(2) {
            background-image: url("../../assets/vi/m3.png");
          }
          &.active {
            &:nth-child(1) {
              background-image: url("../../assets/vi/m2.png");
            }
            &:nth-child(2) {
              background-image: url("../../assets/vi/m4.png");
            }
          }
        }
      }
    }

    .btn-panel {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      padding: 15px;
    }

    .btn-panel {
      height: 80px;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      padding: 0 20px;
    }
  }

  .colR {
    flex: 1;
    width: 1%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    margin: 20px 0 20px 20px;
    border-radius: 12px;
    overflow: hidden;

    .preview {
      display: flex;
      flex-wrap: wrap;
      overflow: hidden;
      justify-content: center;
      align-items: center;
      min-width: 600px;
      max-width: 780px;

      .imageItem {
        position: relative;
        width: calc(43% - 10px);
        margin: 10px;
        display: flex;

        .download {
          position: absolute;
          width: 30px;
          height: 30px;
          right: 20px;
          top: 20px;
          cursor: pointer;
        }

        .save {
          position: absolute;
          width: 30px;
          height: 30px;
          left: 20px;
          top: 20px;
          cursor: pointer;
        }
      }

      .image {
        width: 100%;
        background-color: #eee;
        object-fit: cover;
        border-radius: 10px;
      }
    }
  }

  .bookmark {
    width: 140px;
    background-color: #fff;
    border-radius: 12px;
    overflow: hidden;
    margin: 20px;

    .title {
      height: 48px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      border-bottom: solid 1px #eee;
    }

    .scrollbar {
      height: calc(100vh - 149px);
    }

    .rows {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding-bottom: 12px;

      .image {
        width: 100px;
        height: 100px;
        object-fit: cover;
        border: solid 2px #fff;
        margin-top: 12px;
        cursor: pointer;

        &.active {
          border-color: #2171fe;
        }
      }
    }
  }
}
</style>
